<template>
  <div class="app-container">
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">普通设置</div>
      </div>
      <el-form>
        <el-form-item label="轮播图LOGO" label-width="200px">

        <el-upload
                class="avatar-uploader"
                action="https://m.sapiki.com//admin/common/imageUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="bannerlist" :src="bannerlist" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div style="font-size: 12px;color: #6D6D6D;">尺寸宽750*高566</div>
        </el-form-item>

        <el-form-item label="轮播图间隔时长" label-width="200px">
          <el-input placeholder v-model="formdata.duration" style="width:90%">
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="客户入店时间" label-width="200px">
          <el-input placeholder v-model="formdata.customer_entry" style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="座位上电时间" label-width="200px">
          <el-input placeholder v-model="formdata.seat_power_on" style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="座位断电时间" label-width="200px">
          <el-input placeholder v-model="formdata.seat_power_off" style="width:90%">
            <template slot="prepend">订单结束后</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="包间订单取消截止时间" label-width="200px">
          <el-input placeholder v-model="formdata.cancel" style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">预约规则设置</div>
      </div>
      <el-form>
        <el-form-item label="免费取消" label-width="200px">
          <el-input placeholder v-model="formdata.free" style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <!-- <div style="display:flex;align-items:center;width:91%">
          <div
            style="color:#6D6D6D;font-size:14px;white-space: nowrap;margin-right:8px;width:200px;text-align:right;margin-left:24px"
          >超过免费时长后，取消规则配置</div>
          <el-divider></el-divider>
        </div>
        <el-form-item label="结算方式" label-width="200px">
          <el-select v-model="value" style="width:50%" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <div style="display:flex;align-items:center;width:91%">
          <div
            style="color:#6D6D6D;font-size:14px;white-space: nowrap;margin-right:8px;width:200px;text-align:right;margin-left:24px"
          >未签到规则配置</div>
          <el-divider></el-divider>
        </div>
        <el-form-item label="允许迟到时间" label-width="200px">
          <el-input placeholder v-model="formdata.allow_late" style="width:90%">
            <template slot="prepend">订单结束后</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item> -->
        <!-- <el-form-item label="未签到时" label-width="200px">
          <el-radio v-model="formdata.sign_in" :label="1">不取消订单</el-radio>
          <el-radio v-model="formdata.sign_in" :label="2">取消订单</el-radio>
        </el-form-item> -->
        <div style="display:flex;align-items:center;width:91%">
          <div
            style="color:#6D6D6D;font-size:14px;white-space: nowrap;margin-right:8px;width:200px;text-align:right;margin-left:24px"
          >提前结束规则配置</div>
          <el-divider></el-divider>
        </div>
        <el-form-item label="可提前结束时间" label-width="200px">
          <el-input placeholder v-model="formdata.advance" style="width:90%">
            <template slot="prepend">订单开始后</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="结算方式" label-width="200px">
          <el-select v-model="value1" style="width:50%" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div
          style="color:#6D6D6D;font-size:14px;margin-bottom:28px;margin-left:102px;"
        >使用次卡预约的订单提前结束时是否需要返还次卡，默认是不返还。</div>
        <div style="display:flex;margin-left:110px;margin-bottom:36px;">
          <span style="color:#333333;font-size:14px;margin-right:14px;">返还次卡次数</span>
          <el-checkbox v-model="checked" @change="cardchecked"></el-checkbox>
        </div>
      </el-form>
    </div>
    <!-- <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">储值/积分系统</div>
      </div>
      <div class="titswenzi">
        品牌若需要推行自己的储值/积分系统，可修改以下单位及比例信息。
        注意！修改只影响往后的用户储值计算，不会追溯及修改历史记录。请谨慎操作
      </div>
      <el-form>
        <el-form-item label="储值名称" label-width="200px">
          <el-input v-model="formdata.stored_title" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="储值单位" label-width="200px">
          <el-input v-model="formdata.stored_unit" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="人民币换算比例" label-width="200px">
          <el-input v-model="formdata.scale" style="width:90%">
            <template slot="prepend">1：</template>
          </el-input>
        </el-form-item>
        <div class="titswenzi">启用自由储值后，会员可自定义充值积分。</div>
        <div style="display:flex;margin-left:110px;margin-bottom:26px;">
          <span style="color:#333333;font-size:14px;margin-right:14px;">启用自由储值</span>
          <el-checkbox v-model="checkeds" @change="freecheckeds"></el-checkbox>
        </div>
        <el-form-item label="最少储值" label-width="200px">
          <el-input v-model="formdata.least" style="width:90%"></el-input>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">分享图片</div>
      </div>
      <div class="titswenzi">上传即修改，尺寸宽500*高400</div>
      <div style="display:flex;margin-left:36px;margin-bottom:38px">
        <div style="margin-right:26px">
          <div style="display:flex;align-items:center;margin-bottom:12px;margin-left:10px">
            <span class="dian"></span>
            <span>分享图片</span>
          </div>
          <div class="imgcont">
               <el-upload
                class="avatar-uploaderd"
                action="https://m.sapiki.com//admin/common/imageUpload"
                :show-file-list="false"
                :on-success="handsuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatard" />
                <i v-else class="el-icon-plus avatar-uploader-icond"></i>
              </el-upload>
            <!-- <el-upload
              action="https://m.sapiki.com//admin/common/imageUpload"
              list-type="picture-card"
              :on-change="handchange"
              :on-success="handsuccess"
              :on-remove="handleRemove"
              :class="{hide:hideUpload}"
            >
              <i class="el-icon-plus avatar-uploader-icons"></i>
            </el-upload>

            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog> -->
            <!-- <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar"> -->
            <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>-->
          </div>
        </div>
        <div>
          <div style="display:flex;align-items:center;margin-bottom:12px;margin-left:10px">
            <span class="dian"></span>
            <span>分享标题</span>
          </div>
          <div class="imgcont">
             <el-upload
                class="avatar-uploaderd"
                action="https://m.sapiki.com//admin/common/imageUpload"
                :show-file-list="false"
                :on-success="handsuccessd"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrld" :src="imageUrld" class="avatard" />
                <i v-else class="el-icon-plus avatar-uploader-icond"></i>
              </el-upload>
            <!-- <el-upload
              action="https://m.sapiki.com//admin/common/imageUpload"
              list-type="picture-card"
              :on-change="handchanged"
              :on-success="handsuccessd"
              :on-remove="handleRemoved"
              :class="{hided:hideUploadd}"
            >
              <i class="el-icon-plus avatar-uploader-icons"></i>
            </el-upload>

            <el-dialog :visible.sync="dialogVisibled" append-to-body>
              <img width="100%" :src="dialogImageUrld" alt />
            </el-dialog> -->
          </div>
        </div>
      </div>
    </div>
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">我的配置</div>
      </div>
      <el-form>
        <el-form-item label="拥有一家自习室" label-width="200px">
        <el-upload
                class="avatar-uploader"
                action="https://m.sapiki.com//admin/common/imageUpload"
                :show-file-list="false"
                :on-success="handleroomSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="roomlist" :src="roomlist" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div style="font-size: 12px;color: #6D6D6D;">尺寸宽750*高750</div>
        </el-form-item>
        <el-form-item label="合作" label-width="200px">
        <el-upload
                class="avatar-uploader"
                action="https://m.sapiki.com//admin/common/imageUpload"
                :show-file-list="false"
                :on-success="handlehezuoSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="hezuolist" :src="hezuolist" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div style="font-size: 12px;color: #6D6D6D;">尺寸宽750*高750</div>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:right;width:99%;margin-bottom:40px">
      <el-button type="primary" @click="saveinstall">保存设置</el-button>
    </div>
  </div>
</template>

<script>
import { installmodel, indexInfo } from "@/api/user";
import Base64 from "@/utils/base";

export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogImageUrld: "",
      hideUpload: false,
      hideUploadd: false,
      limitCount: 1,
      limitCountd: 1,
      imageUrl: "",
      imageUrld: "",
      dialogVisible: false,
      dialogVisibled: false,
      radio: "1",
      options: [
        {
          value: "1",
          label: "按时间折算扣费"
        }
      ],
      value: "1",
      options1: [
        {
          value: "1",
          label: "按时间折算扣费"
        }
      ],
      value1: "1",
      formdata: "",
      checked: false,
      checkeds: false,
      status: "",
      bannerlist: "",
      roomlist: "",
      hezuolist:""
    }
  },
  created() {
    this.getindexdata();
  },
  methods: {
    getindexdata() {
      installmodel().then(res => {
        this.formdata = res.result.data;
        this.bannerlist = res.result.data.logo;
        this.roomlist = res.result.data.room_logo;
        this.hezuolist = res.result.data.cooperation_logo;
        this.imageUrl = res.result.data.share_img;
        this.imageUrld = res.result.data.share_slogan;
        this.value = res.result.data.settlement;
        this.value1 = res.result.data.settlements;
        this.status = res.result.data.status;
        if (res.result.data.frequency == 1) {
          this.checked = true;
        }
        if (res.result.data.freedom == 1) {
          this.checkeds = true;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.bannerlist = res.file_path;
    },
    handleroomSuccess(res) {
      this.roomlist = res.file_path;
    },
    handlehezuoSuccess(res) {
      this.hezuolist = res.file_path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
    },
    handchange(fileList) {
      this.hideUpload = fileList.length >= this.limitCount;
    },
    handchanged(fileList) {
      this.hideUploadd = fileList.length >= this.limitCountd;
    },
    handleRemove(fileList) {
      this.hideUpload = fileList.length >= this.limitCount;
    },
    handleRemoved(fileList) {
      this.hideUploadd = fileList.length >= this.limitCountd;
    },
    // handleAvatarSuccess(res, file) {
    //   this.bannerlist = res.file_path;
    // },
    handsuccess(response) {
      this.imageUrl = response.file_path;
    },
    handsuccessd(response) {
      this.imageUrld = response.file_path;
    },
    // handlePictureCardPreview(file) {
    //   console.log(file)
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
    cardchecked(e) {
      if (e) {
        this.formdata.frequency = 1;
      } else {
        this.formdata.frequency = 2;
      }
    },
    freecheckeds(e) {
      if (e) {
        this.formdata.freedom = 1;
      } else {
        this.formdata.freedom = 2;
      }
    },
    saveinstall() {
      let parmes = {
        advance: this.formdata.advance,
        allow_late: "",
        logo:this.bannerlist,
        room_logo:this.roomlist,
        cooperation_logo:this.hezuolist,
        // cancel: this.formdata.cancel,
        // customer_entry: this.formdata.customer_entry,
        duration: this.formdata.duration,
        free: this.formdata.free,
        id:this.formdata.id,
        freedom: this.formdata.freedom,
        frequency: this.formdata.frequency,
        // least: this.formdata.least,
        // scale: this.formdata.scale,
        // seat_power_off: this.formdata.seat_power_off,
        // seat_power_on: this.formdata.seat_power_on,
        settlement: this.formdata.settlement,
        settlements: this.formdata.settlements,
        share_img: this.imageUrl,
        share_slogan: this.imageUrld,
        // sign_in: this.formdata.sign_in,
        status: this.formdata.status,
        store_id: this.formdata.store_id,
        // stored_title: this.formdata.stored_title,
        // stored_unit: this.formdata.stored_unit,
      };
      indexInfo(
        { request_data: Base64.encode(JSON.stringify(parmes)) },
      ).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.getindexdata()
      });
    }
  }
};
</script>
<style scoped>
.hide .el-upload--picture-card {
  display: none;
}
.hided .el-upload--picture-card {
  display: none;
}
</style>
<style scoped>
.cont1 {
  width: 98%;
  height: auto;
  margin: 10px auto 30px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(55, 55, 55, 0.1);
  overflow: hidden;
}
.row_flextit {
  margin-left: 26px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}
.block {
  width: 10px;
  height: 16px;
  background: #409eff;
  margin-right: 20px;
}
.titwenzi {
  color: #333;
  font-size: 14px;
}
.titswenzi {
  color: #6d6d6d;
  font-size: 14px;
  margin-left: 56px;
  margin-bottom: 26px;
}
.imgcont {
  width: 280px;
  height: 218px;
  background: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dian {
  width: 6px;
  height: 6px;
  background: #409eff;
  border-radius: 50%;
  margin-right: 4px;
}
.contwenzibox {
  width: 262px;
  height: auto;
  background: #ffffff;
  border: 1px solid #eeeff1;
  border-radius: 2px;
}
.avatar {
  width: 180px;
  height: 148px;
  border-radius: 6px;
  display: block;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 148px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar-uploader-icond {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatard {
  width: 148px;
  height: 148px;
  border-radius: 6px;
  display: block;
}
.avatar-uploaderd {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
}
.avatar-uploaderd:hover {
  border-color: #409eff;
}
</style>

